<template>
    <div class="person">
      <img :src="avatar" alt="" />
      <div>{{name}}</div>
    </div>
  </template>
  
  <script>
  export default {
      // 如下声明的两个属性:       avatar:头像路径    name:名称
      // 默认undefined，可以接收任意类型的数据
      props:['avatar', 'name']
  };
  </script>
  
  <style lang="scss" scoped>
  .person {
    margin:0px 10px 10px 0px;
    display: inline-block;
    border: 1px solid #ddd;
    width: 90px;
    padding: 5px;
    img {
      width: 90px;
    }
    div {
      font-size: 0.8em;
      width:90px;
      overflow:hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: center;
    }
  }
  </style>
  